<template>
  <el-form class="el-form-col" label-width="90px" :label-position="labelPosition">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>出库单信息</span>
        <el-button class="pull-right" type="text" @click="print">打印出库库拣货单</el-button>
      </div>
      <el-row :gutter="15">
        <el-col :lg="6" :md="12">
          <el-form-item label="出库单号:">
            <span>{{ ChOrderOutWarehouse.outWarehouseNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="关联订单:">
            <span>{{ ChOrderOutWarehouse.orderNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="出库仓:">
            <span>{{ ChOrderOutWarehouse.warehouse }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="商家名称:">
            <span>{{ ChOrderOutWarehouse.cargoOwner }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户信息</span>
      </div>
      <el-row :gutter="15">
        <el-col :lg="6" :md="12">
          <el-form-item label="用户姓名:">
            <span>{{ chOrderConsigneeInfo.consigneName }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="用户电话:">
            <span>{{ chOrderConsigneeInfo.consignePhone }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="用户地址:">
            <span>
              {{ chOrderConsigneeInfo.consigneProvince }}
              {{ chOrderConsigneeInfo.consigneCity }}
              {{ chOrderConsigneeInfo.consigneDistrict }}
              {{ chOrderConsigneeInfo.consigneAddress }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>拣货单信息</span>
      </div>
      <el-row :gutter="15">
        <el-col :lg="6" :md="12">
          <el-form-item label="拣货单号:">
            <span>{{ ChOrderOutSorting.code }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="拣货员:">
            <span>{{ ChOrderOutSorting.sortingPersonName }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="分配人:">
            <span>{{ ChOrderOutSorting.founderName }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="分配时间:">
            <span>{{ ChOrderOutSorting.foundtime | unixTimestampFilter}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix"><span>库位信息</span></div>
      <PackageTable
        :value="productDetailBeans"
        :columnMap = "{
              standard: 'packageStandard',
              volume: 'packageVolume',
              num: 'packagePlanNum'
          }"
      >
        <el-table-column
          prop="positionName"
          min-width="300px"
          label="库位">
        </el-table-column>
      </PackageTable>
    </el-card>
    <Print-modal ref="PrintModal" :sortingId="id"></Print-modal>
  </el-form>

</template>
<script>
import {filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import PackageTable from '@/views/oms/business/PackageTable'
import PrintModal from '@/views/oms/outputWarehouse/warehousePicklist/PrintModal'
export default {
  name: 'outputWarehousePicklistShow',
  components: {
    PackageTable,
    PrintModal
  },
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      labelPosition: 'left',
      id: this.$route.params.id,
      ChOrderOutWarehouse: {},
      ChOrderOutSorting: {},
      productDetailBeans: [],
      chOrderConsigneeInfo: {}
    }
  },
  created() {
    this.getOutWarehouse()
    this.getOrderOutSorting()
    this.getProductDetail()
  },
  computed: {},
  methods: {
    getOutWarehouse() {
      this.$ajax.get('/ms-warehouse-order/outWarehose/findByOrderWarehouseInfo', {outOrderId: this.id}).then(response => {
        console.log('response', response)
        if (!response.data) {
          return
        }
        this.ChOrderOutWarehouse = response.data || {}
        this.chOrderConsigneeInfo = this.ChOrderOutWarehouse.chOrderConsigneeInfo || {}
      })
    },
    getOrderOutSorting() {
      this.$ajax.get('/ms-warehouse-order/outWarehose/findByOrderDistributionInfo', {outOrderId: this.id}).then(response => {
        console.log('response', response)
        if (!response.data) {
          return
        }
        this.ChOrderOutSorting = response.data || {}
      })
    },
    getProductDetail() {
      this.$ajax.get('/ms-warehouse-order/outWarehose/findByDistritionInfo', {outOrderId: this.id}).then(response => {
        console.log('response', response)
        if (!response.data) {
          return
        }
        this.productDetailBeans = response.data || []
      })
    },
    print() {
      this.$refs.PrintModal.show()
    }
  }
}
</script>
